<template>
	<view class="bg-gray">
		<!-- 第一部分-->
		<view class="flex justify-center align-center bg-white content1" style="border: 0.5upx #EEEEEE solid;">
			<!--头像、昵称、id-->
			<view>
				<!--头像-->
				<view class="flex justify-center round">
					<image class="user-logo" :src='user.avatarurl'></image>
				</view>
				<!--头像-->
				<!--昵称-->
				<view class="flex justify-center user-name">
					<text>{{user.nickname}}</text>
				</view>
				<!--昵称-->
				<!--id-->
				<view class="cu-tag round user-id">
					<text>{{user.id}}</text>
				</view>
				<!--id-->
			</view>
			<!--头像、昵称、id-->
		</view>
		<!--第一部分-->

		<!--第二部分-->
		<!--标头-->
		<view class="bg-white activate" style="border-bottom: 0.1upx solid #e7e7e7;border-top: 0.5upx solid #e7e7e7;;">
			<view style="display: flex;align-items: center;">
				<text style="margin-right: 5upx;color: #feb2b2;" class="cuIcon-title line-red"></text>
				<text style="font-weight: bold;font-size: 110%;">我的服务</text>
			</view>
			<view class="text-gray">
				<button class="cu-btn lines-gray sm round">全部订单</button>
			</view>
		</view>
		<!--标头-->
		<!--服务列表-->
		<view class="cu-list grid col-3 border" style="border-bottom: #EEEEEE solid 0.5upx;">
			<view style="position: relative;" class="flex align-center flex-direction cu-item" v-for="(p,i) in orders"
			 :key="i" v-if="i<3*2">
				<view :class="p.icon" style="color: #feb2b2;">
					<view class="cu-tag badge" v-if="p.num!=0">
						<block v-if="p.num!=0">{{p.num>99?'99+':p.num}}</block>
					</view>
				</view>
				<view style="margin-bottom: 20upx;">
					{{p.test}}
				</view>
			</view>

		</view>
		<!--服务列表-->
		<!--第二部分-->

	</view>
</template>

<script>
	import {
		uniSegmentedControl
	} from "@dcloudio/uni-ui";
	import {
		uniIcons
	} from "@dcloudio/uni-ui";
	import {
		uniFab
	} from "@dcloudio/uni-ui";
	import fabBtn from "@/component/fabBtn";
	export default {
		components: {
			uniSegmentedControl,
			uniIcons,
			uniFab,
			fabBtn
		},
		methods: {
		},
		mounted() {
			this.user = uni.getStorageSync("user");
		},
		onShow() {
			console.log("onshow");	
			this.user = uni.getStorageSync("user");
		},
		onLoad() {
			this.user = uni.getStorageSync("user");
		},
		data() {
			return {
				i: 0,
				num: 0,
				modalName: null,
				//服务列表
				//test：服务名称
				//icon：图标
				//num：新消息数
				//id：下标
				//url：跳转链接
				orders: [{
						test: "待付款",
						icon: "cuIcon-shopfill",
						num: 5,
						id: 1,
						url: "/pagesA/shop/index"
					},
					{
						test: "待收货",
						icon: "cuIcon-deliver_fill",
						num: 1,
						id: 2,
						url: "../clockIn/index"
					},
					{
						test: "待评价",
						icon: "cuIcon-commentfill",
						num: 2,
						id: 3,
						url: "./mine-like/mine-like"
					}
				],
				//用户数据
				//id：用户id
				//name:用户昵称
				//image：用户头像
				//credit：用户积分
				//goldcoin:用户金币
				user: {
					uid: 4,
					name: "Yvjin",
					image: "http://39.106.100.179:9999/group1/M00/00/00/J2pks16oTJ2AClMsAAHw8xgOVfY843.jpg",
					credit: 344,
					goldcoin: 115
				},
				credit:{}
			};
		}
	};
</script>

<style lang="scss" scoped>
	.user-goldcoin {
		display: flex;
		align-items: center;
	}

	.user-id {
		display: flex;
		align-items: center;
	}

	.user-credit {
		font-size: 100%;
		font-weight: bold;
	}

	.user-name {
		font-size: 150%;
		font-weight: bold;

	}

	.content1 {
		padding: 30upx 30upx 30upx 30upx;

	}

	.user-logo {
		width: 160rpx;
		height: 160rpx;
		display: block;
		overflow: hidden;
		border-radius: 50%;
		margin: 40rpx auto;
	}

	.activate {
		display: flex;
		justify-content: space-between;
		height: 90upx;
		align-items: center;
		padding-left: 20upx;
		padding-right: 20upx;
	}
</style>
